﻿@using FH.Application.PorductApp.Dtos
@using FH.Application.BannerApp.Dtos
@{
    ViewData["Title"] = "产品列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
    List<CategoryDto> categoryDtos = ViewBag.Categorys as List<CategoryDto>;
    List<ProductDto> productDtos = ViewBag.Products as List<ProductDto>;
   

}
<style type="text/css">
  
    .service-v1 {
        padding-bottom: 20px;
        background-image: url('/images/B-01.jpg');
        background-color: rgb(9, 14, 20);
        height: 316px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    p.phbox img.phfront {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }

    p.phbox img.phback {
        height: 0px;
        z-index: 1;
        position: absolute;
        left: 0;
        top: 34px;
    }

    .button_btndefault-link {
        text-align: center;
        display: block;
        margin-top: 20px;
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
    }

    A.button_btndefault-link:visited {
        text-decoration: none;
        color: #fff;
    }

    A.button_btndefault-link:link {
        text-decoration: none;
        color: #fff;
    }

    .itembox {
        margin-top: 10px;
    }

        .itembox.border {
            border-right: 1px solid #fff;
        }

    .navigation, .navigation ul, .navigation li {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        border: thin none;
    }

    .navigation {
        position: relative;
        height: 54px;
        line-height: 54px;
        background: url(http://static.websiteonline.cn/website/plugin/new_navigation/styles/hs7/nav_bg.jpg) repeat-x;
        margin-bottom: 10px;
        padding-left: 10px;
    }

        .navigation li.wp_subtop {
            padding-left: 5px;
            padding-right: 5px;
            text-align: center;
            position: relative;
            float: left;
            padding-bottom: 0px;
            width: 115px;
            cursor:pointer;
            margin-right:8px;
            height: 54px;
            line-height: 54px;
            background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
            background-repeat: no-repeat;
            background-position: top right;
            background-color: transparent;
        }

            .navigation li.wp_subtop:hover, .navigation li.active {
                width: 115px;
                height: 54px;
                line-height: 54px;
                background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/styles/hs7/li_hover.png);
                background-color: transparent;
                background-position: bottom left;
                background-repeat: repeat-x;
            }

            .navigation li.wp_subtop > a {
                white-space: nowrap;
                display: block;
                padding: 0px;
                text-decoration: none;
                font-size: 12px;
                font-family: arial;
                color: #ffffff;

                text-align: center;
                font-weight: normal;
                font-style: normal;
                overflow: hidden;
            }

                .navigation li.wp_subtop > a:hover,.navigation li.active > a {
                    font-size: 12px;
                    font-family: arial;
                    color: #fff;
                    text-align: center;
                    font-weight: normal;
                    font-style: normal;
                }

        .navigation ul {
            position: absolute;
            left: 0px;
            display: none;
            padding-left: 5px;
            padding-right: 5px;
            background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
            background-color: transparent;
            margin-left: 0px;
            padding-top: 10px;
            padding-bottom: 8px;
        }

            .navigation ul li {
                cursor:pointer;
                position: relative;
                text-align: center;
                padding-bottom: 0px;
                padding-left: 5px;
                padding-right: 5px;
                height: 31px;
                line-height: 31px;
                background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
                background-repeat: repeat;
                background-position: top left;
                background-color: #516c47;
            }

                .navigation ul li:hover {
                    height: 31px;
                    text-align: center;
                    line-height: 31px;
                    padding-left: 5px;
                    padding-right: 5px;
                    background-image: url(http://static.websiteonline.cn/website/plugin/new_navigation/view/images/png_bg.png);
                    background-repeat: repeat;
                    background-position: top left;
                    background-color: #3a4c34;
                }

                .navigation ul li a {
                    display: block;
                    font-size: 12px;
                    font-family: arial;
                    color: #fff;
                    text-align: center;
                    font-weight: normal;
                    font-style: normal;
                    white-space: nowrap;
                }

                    .navigation ul li a:hover {
                        display: block;
                        font-size: 12px;
                        font-family: arial;
                        color: #ffffff;
                        text-align: center;
                        font-weight: normal;
                        font-style: normal;
                    }

    .navigation {
        background-color: transparent;
    }

    .navigation {
        background-image: url(http://static.websiteonline.cn/website/plugin/product_category/view/images/png_bg.png);
    }

    .navigation {
        height: 46px;
    }

    .navigation {
        background-position: center center;
    }

        .navigation li.wp_subtop {
            line-height: 46px;
        }

        .navigation li.wp_subtop {
            height: 46px;
        }

            .navigation li.wp_subtop > a {
                font-family: Microsoft YaHei;
            }

            .navigation li.wp_subtop > a {
                font-size: 14px;
            }

            .navigation li.wp_subtop > a {
                color: #434343;
            }

        .navigation li.wp_subtop {
            background-position: center center;
        }

            .navigation li.wp_subtop:hover {
                line-height: 46px;
            }

            .navigation li.wp_subtop:hover {
                height: 46px;
            }

            .navigation li.wp_subtop > a:hover {
                font-size: 14px;
            }

            .navigation li.wp_subtop > a:hover {
                font-family: Microsoft YaHei;
            }

        .navigation li.wp_subtop {
            background-image: url("http://security-1010808.hkpic1.websiteonline.cn/upload/class_bg.png");
        }

        /*.navigation li.wp_subtop {
            width: 150px;
        }

            .navigation li.wp_subtop:hover {
                width: 150px;
            }*/

            .navigation li.wp_subtop:hover {
                background-color: transparent;
            }

            .navigation li.wp_subtop:hover {
                background-image: url("http://security-1010808.hkpic1.websiteonline.cn/upload/class_bg_hover.png");
            }

            .navigation li.wp_subtop:hover {
                background-position: center center;
            }

            .navigation li.wp_subtop:hover {
                background-repeat: no-repeat;
            }

    .aeffect {
        width: 100%;
        display: block;
        max-height: 350px;
    }

    .product-list .item {
        padding: 20px;
    }

    .aeffect > img {
        width: 100%;
        max-height: 350px;
    }

    .product-list .title {
        display: block;
        text-align: center;
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: bold;
        line-height: 140%;
        color: #333;
        padding: 8px;
    }
    .wp-title_content {
        word-wrap: break-word;
        padding: 0px;
        margin: 0 auto;
        display: block;
    }
</style>
<section class="service-v1 hidden-sm hidden-xs">
    <div class="container ">
        <div class="row">
            <div class="col-md-3">

            </div>
            <div class="col-md-6">
                <div class="wp-title_content" style="border-color: transparent; border-width: 0px; height: 51px;margin-top: 120px;float:left;">
                    <div style="text-align:left;">
                        <span style="color: #cd3c32; font-family: 微软雅黑; font-size: 29px;    float: left;">
                            <strong>产品中心</strong>
                        </span>
                    </div>
                </div>

                <div class="wp-title_content" style="margin-top: 115px;border-color: transparent; border-width: 0px;float:left;    margin-left: 20px;">
                    <div style="text-align: left;"><span style="color: #333;font-weight: bold; font-family: 微软雅黑; line-height: 180%; font-size: 14px;">致力于新型建筑材料的研发与制造</span></div>
                    <div style="text-align: left;"><span style="color: #333;font-weight: bold; font-family: 微软雅黑; line-height: 180%; font-size: 14px;">为客户提供系统的解决方案及全面的技术支持</span></div>
                </div>
            </div>
        </div>

    </div>
</section>
<section class="products">
    <div class="container">

        <div class="row hidden-sm" >
            <div class="col-md-12">
                <div class="wp-title_content" style="border-color: transparent; border-width: 0px; height: 51px;margin-top: 80px;">
                    <div style="text-align: center;">
                        <span style="color: rgb(67, 67, 67); font-family: 微软雅黑; font-size: 29px;">
                            <strong>产品中心</strong>
                        </span>
                    </div>
                </div>
                <div class="wp-title_content" style="margin-top: 20px; border-color: rgb(218, 36, 24) transparent transparent; border-width: 4px 0px 0px; height: 7px; width: 50px;  border-style: solid;">&nbsp; &nbsp; &nbsp;</div>
            </div>
        </div>
        <div class="row" style="margin-top: 50px;">
            <ul class="navigation">
                @if (categoryDtos != null && categoryDtos.Any())
                {
                    for (int i = 0; i < categoryDtos.Count(); i++)
                    {
                        <li style="z-index:2;" class="wp_subtop @(i==0?"active":"")" pid="1" data-id="@categoryDtos[i].Id"><a class="" href="@Url.Action("Index",new { id=categoryDtos[i].Id})">@categoryDtos[i].Name</a></li>
                    }
                   

                }

                @*<li style="z-index:2;" class="wp_subtop" pid="2"><a class="">报警系统</a></li>
                <li style="z-index:2;" class="wp_subtop" pid="3"><a class="">门禁系统</a></li>
                <li style="z-index:2;" class="wp_subtop" pid="4"><a class="">集团系统</a></li>
                <li style="z-index:2;" class="wp_subtop" pid="5"><a class="">消防系统</a></li>
                <li style="z-index: 2; border-right: none;" class="wp_subtop" pid="6"><a class="">智能交通</a></li>*@
            </ul>
        </div>
        <div class="row product-list" id="products">
            @foreach (ProductDto item in productDtos)
            {
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                    <a class="aeffect">
                        <img src="@item.Thumbnail" class="img_lazy_load" />
                    </a>
                    <a class="title" href="@Url.Action("Detail","Product",new { id=item.Id})">@item.Name</a>
                </div>

            }

            @*<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                <a class="aeffect">
                    <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                </a>
                <a class="title">耐磨固化系统</a>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                <a class="aeffect">
                    <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                </a>
                <a class="title">耐磨固化系统</a>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                <a class="aeffect">
                    <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                </a>
                <a class="title">耐磨固化系统</a>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                <a class="aeffect">
                    <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                </a>
                <a class="title">耐磨固化系统</a>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">
                <a class="aeffect">
                    <img src="http://security-1010808.hkpic1.websiteonline.cn/upload/f8.jpg" class="img_lazy_load" />
                </a>
                <a class="title">耐磨固化系统</a>
            </div>*@
        </div>
    </div>
</section>
@section scripts{ 
    <script type="text/javascript">
        $(function () {
            $('.wp_subtop').click(function () {
                var $this = $(this);
                $this.addClass('active').siblings().removeClass('active');
                $.post('@Url.Action("Data")', { id: $this.data('id') }, function (data) {
                    if (data && data.length > 0) {
                        var html = '';

                        for (var i = 0; i < data.length; i++) {
                            html += '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 item">'
                                + ' <a class="aeffect"><img src="' + data[i].thumbnail + '" class="img_lazy_load" /></a>'
                                + '<a class="title" href="@Url.Action("Detail","Product")' + '?id=' + data[i].id + '">' + data[i].name + '</a></div>';

                        }
                        $('#products').empty().append(html);
                    } else {
                        $('#products').empty();

                    }
                });
            });
        });
    </script>
}